<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
        }

        #base-box {
            position: relative;
            width: 450px;
            height: 450px;
            background: url(./image/my-computed-small.jpg);
            border: 1px solid red;
        }

        .move-model {
            width: 300px;
            height: 300px;
            position: absolute;
            background-color: yellow;
            opacity: 0.5;
            top: 0;
            left: 0;
            cursor: move;
        }

        #large-box {
            width: 540px;
            height: 540px;
            border: 1px solid red;
            background-image: url(./image/my-compute-large.jpg);
            background-repeat: no-repeat;
            background-position: 0 0;
            /* display: none; */
        }

        .all-model {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="base-box">
            <div class="move-model"></div>
            <div class="all-model"></div>
        </div>
        <div id="large-box"></div>
    </div>
</body>
<script>
    var baseBtn = document.getElementById('base-box')
    var allModel = document.getElementsByClassName('all-model')[0]
    var moveModel = document.getElementsByClassName('move-model')[0]

    allModel.onmousemove = function (e) {
        console.log(e)
        var offsetX = e.offsetX
        var offsetY = e.offsetY
        var moveModelWidth = moveModel.clientWidth
        var moveModelHeight = moveModel.clientHeight
        var posLeft = offsetX - (moveModelWidth / 2)
        var posTop = offsetY - (moveModelHeight / 2)


        moveModel.style.top = posTop + 'px'
        moveModel.style.left = posLeft + 'px'

    }
</script>

</html>